<template>
    <div class="order">

        <div id="content" v-if="list.data.length > 0">
            <cube-scroll ref="scroll" :options="scroll_options" @pulling-up="upLoad">

                <div class="list" v-for="item in list.data" :key="item.order_id">
                    <router-link :to="'list/order-detail/'+item.order_id" class="a">
                       <div class="header">
                           订单编号：<span>{{item.order_id}}</span>
                           <b v-if="item.status === '1'">待发货</b>
                           <b v-else-if="item.status === '2'">已发货</b>
                           <b v-else-if="item.status === '3'">完成</b>
                           <b v-else>已取消</b>
                       </div>
                       <img class="cover" :src="item.cover" @load="$refs.scroll.refresh()" />
                        <p class="name">{{item.name}}</p>
                        <p class="number">数量：{{item.number}}</p>
                        <p class="price">{{setting.currency_name}}：{{item.price}}</p>
                        <p class="time">下单时间：<span>{{item.create_time}}</span></p>
                    </router-link>
                </div>

            </cube-scroll>
        </div>
        <empty v-else>暂无订单</empty>

        <!--S子页面-->
        <transition :name="transition_name">
            <router-view class="children" />
        </transition>
        <!--E子页面-->
    </div>
</template>

<script>
    import { mapState } from "vuex";
    import empty from "../../../../components/empty/Empty";
    export default {
        name: "order",
        data(){
            return {
                transition_name:"",
                list:{
                    data:[],
                    limit:[0,10]
                },
                //滚动参数
                scroll_options:{
                    pullUpLoad: {
                        txt: {
                            more: "上拉加载更多",
                            noMore: "----我也是有底线的----"
                        }
                    }
                },
            }
        },
        components:{
            empty
        },
        computed:{
          ...mapState({
              setting:"setting"
          })
        },
        beforeRouteUpdate(to, from, next){
            this.transition_name = to.path.split('/').length < from.path.split('/').length ? "animate__animated animate__slideOutRight animate__faster animate__delay-2s" : "animate__animated animate__slideInRight animate__faster animate__delay-2s";
            setTimeout(()=>{
                next();
            },10);
        },
        created() {
            this.getList();
        },
        methods:{
            //获取订单列表
            getList(){
                this.$url("order/getListApp",{
                    uid:this.$sysinfo.uid,
                    limit:this.list.limit
                })
                    .then((res)=>{
                        if(res.data.status === "success"){
                            this.list.limit[0] += this.list.limit[1];
                            if(this.$refs.scroll) this.$refs.scroll.forceUpdate(true,true);
                            this.list.data.push(...res.data.data);
                        }else{
                            if(this.$refs.scroll) this.$refs.scroll.forceUpdate(false,false);
                        }
                    });
            },
            //上拉加载
            upLoad(){
                this.getList();
            }
        }
    }
</script>

<style scoped lang="less" src="./order.less"></style>